<template>
	<view class="normal-login-container"
		style="background-color: #515cee;height: 100vh;display: flex;flex-direction: column;">
		<view style="height: 90vh">
			<view class="logo-content align-center justify-center flex"
				style="flex-direction: column;padding-top: 200rpx;">
				<image class="img" style="width: 100rpx;height: 100rpx;" src="@/static/images/logo.png" mode="widthFix">
				</image>
				<text class="title">{{ $t('login.videoBigData') }}</text>
			</view>
			<view class="login-form-content">
				<view class="logo-row">
					<view class="logo-title">
						{{ $t('login.username') }}
					</view>
					<view class="logo-txt">
						<input class="logo-input" :placeholder="$t('login.enterUsername')" v-model="loginForm.username" />
					</view>
				</view>
				<view class="logo-row">
					<view class="logo-title">
						{{ $t('login.password') }}
					</view>
					<view class="logo-txt">
						<input class="logo-input" type="password" :placeholder="$t('login.enterPassword')" v-model="loginForm.password" />
					</view>
				</view>
				<view class="logo-check">
					<uni-data-checkbox class='checkPassworld' v-model="reFlag" multiple :localdata="hobbys" />
				</view>
				<view>
					<button @click="handleLogin" class="login-submit">{{ $t('login.submit') }}</button>
				</view>
				<view class="setBtn" @click="setOn">{{ $t('login.settings') }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/login'
import { setToken } from '@/utils/auth'
export default {
	data() {
		return {
			hobbys: [{
				text: this.$t('login.rememberPassword'),
				value: 1
			}],
			reFlag: '',
			loginForm: {
				username: '',
				password: '',
			},
		}
	},
	created() {
		// 没有token无法跳转  设置token
		setToken('----------------------------------------')

		this.loginForm.username = localStorage.getItem("reAccount")
		this.loginForm.password = localStorage.getItem("rePassword")
		if (localStorage.getItem("reFlag") == 1) {
			this.reFlag = [1]
		}
	},
	methods: {
		//设置
		setOn() {
			uni.navigateTo({
				url: '/pages/mine/indexCope'
			})
		},
		// 登录方法
		async handleLogin() {
			if (this.loginForm.username === "") {
				this.$modal.msgError(this.$t('login.enterAccount'))
			} else if (this.loginForm.password === "") {
				this.$modal.msgError(this.$t('login.enterYourPassword'))
			} else {
				this.$modal.loading(this.$t('login.loggingIn'))
				this.pwdLogin()
			}
		},
		// 密码登录
		async pwdLogin() {
			const that = this
			const reAccount = this.loginForm.username
			const rePassword = this.loginForm.password

			login(this.loginForm).then((res) => {
				this.$modal.closeLoading()
				if (res.code === "00000000") {
					localStorage.setItem("userId", res.data.userId)
					localStorage.setItem('token', res.data.token)
					this.loginSuccess(reAccount, rePassword)
				} else {
					this.$modal.msgError(res.message)
				}
			}).catch(() => {
				this.$modal.closeLoading()
				this.$modal.loading(localStorage.getItem('errorMsg'))
				setTimeout(function () {
					that.$modal.closeLoading()
				}, 2000)
			})
		},
		// 登录成功后，处理函数
		loginSuccess(reAccount, rePassword) {
			if (this.reFlag == 1) {
				localStorage.setItem("reAccount", reAccount)
				localStorage.setItem("rePassword", rePassword)
				localStorage.setItem("reFlag", 1)
			} else {
				localStorage.setItem("reAccount", '')
				localStorage.setItem("rePassword", '')
				localStorage.setItem("reFlag", '')
			}

			this.$tab.reLaunch('/pages/search/index')
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.logo-content {
		width: 100%;
		font-size: 21px;
		text-align: center;
		padding-top: 15%;

		.title {
			color: #fff;
		}
	}

	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;

		.input-item {
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

		}

		.login-btn {
			margin-top: 40px;
			height: 45px;
		}

		.xieyi {
			color: #333;
			margin-top: 20px;
		}
	}

	.easyinput {
		width: 100%;
	}
}

.login-code-img {
	height: 45px;
}

.logo-row {
	width: 90%;
	margin: 30rpx auto;
	color: #fff;
	display: flex;
	justify-content: left;
	align-items: center;
}

.logo-title {
	width: 150rpx;
	text-align: left;
	color: rgba(255, 255, 255, 0.6);
}

.logo-txt {
	margin: 0;
}

.logo-input {
	text-align: left;
}

.login-submit {
	width: 80%;
	border-radius: 10rpx;
	font-size: 32rpx;
	color: #4d56e2;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 100rpx;
}

.img {
	display: block;
	margin: auto;
}

.setBtn {
	border-radius: 10rpx;
	font-size: 32rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: auto;
	text-align: center;
	color: #fff;
}

.logo-check {
	padding: 0px 4vw;
}

// /deep/ .checkPassworld span{color: #fff !important;}
::v-deep .checkPassworld span {
	color: #fff !important;
}
</style>